<template>
    <div class="app-container">
        <el-card class="departmentCard">
            <div>
                <h4 style="font-size: 16px;">申报信息</h4>
                <el-form :data="alarmData" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="告警名称：">
                                <el-input id="alarmName" v-model="alarmData.alarmName" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="告警级别">
                                <el-input id="alarmLevel" v-model="alarmData.alarmLevel" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="光缆段名称：">
                                <el-input id="roadName" v-model="alarmData.roadName" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属分公司：">
                                <el-input id="company" v-model="alarmData.company" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设施类型：">
                                <el-input id="deviceType" v-model="alarmData.deviceType" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="告警状态：">
                                <el-input id="alarmStatusContent" v-model="alarmData.alarmStatusContent" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row />
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="告警时间：">
                                <el-input id="alarmDate" v-model="alarmData.alarmDate" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详细地址：">
                                <el-input id="alarmAddr" v-model="alarmData.alarmAddr" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="告警对象：">
                                <el-input id="alarmDate" v-model="alarmData.alarmObject" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="告警区域：">
                                <el-input id="alarmAddr" v-model="alarmData.alarmArea" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="告警内容：">
                                <el-input id="alarmContent" type="textarea" v-model="alarmData.alarmContent"
                                    style="width:1025px" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <h4 style="font-size: 16px;">其他信息</h4>
                <el-form v-if="alarmData.alarmStatus > 3">
                    <el-form-item>
                        <el-button type="primary" @click="editAlarm">维修信息</el-button>
                        <el-button type="primary" @click="checkAlarm">审核信息</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <h4 style="font-size: 16px;">派工信息</h4>
                <el-form :data="alarmData" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="主维修人员：">
                                <el-input id="masterMaintenance" v-model="alarmData.masterMaintenance" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="辅助维修人员">
                                <el-input id="slaveMaintenance" v-model="alarmData.slaveMaintenance" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车辆：">
                                <el-input id="car" v-model="alarmData.car" maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="据实金额核算：">
                                <el-input id="maintenanceMoney" v-model="alarmData.maintenanceMoney" maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row />
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="据实核算清单：">
                                <el-input id="inventoryList" type="textarea" v-model="alarmData.inventoryList"
                                    style="width:1025px" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <h4 style="font-size: 16px;">维修信息</h4>
                <el-form v-if="alarmData.alarmStatus <= 3" label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="处理地点：">
                                <el-input maxlength="60" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="处理时间：">
                                <el-input maxlength="60" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row />
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="故障原因：">
                                <el-input type="textarea" style="width:1025px" />
                            </el-form-item>
                            <el-form-item label="处理描述：">
                                <el-input type="textarea" style="width:1025px" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <h4 style="font-size: 16px;">事件流程</h4>
                <div class="steps" style="height: 300px;">
                    <div v-for="(item, i) in alarmFlowData" :key="i" class="step">
                        <div class="icon">
                            <div class="point" :class="{ 'lease': item.Time != '', 'space': item.Time == '' }" />
                            <div class="line" />
                        </div>
                        <div class="detail">
                            <span class="state">{{ item.State }}</span>
                            <span class="user">{{ item.Name }}</span>
                            <span class="operTime">{{ item.Time }}</span>
                            <span class="notes">{{ item.Note }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <el-dialog title='维修信息' :data="alarmData" class="map_dialog" width="1000px" :modal="false"
            :close-on-click-modal="false" :visible.sync="showGDDialog">
            <el-form :data="alarmData" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="告警对象：">
                            <el-input v-model="alarmData.alarmObject" maxlength="60" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设施类型">
                            <el-input v-model="alarmData.deviceType" maxlength="60" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="故障原因：">
                            <el-input type="textarea" v-model="alarmData.faultCause" style="width:810px" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="处理地点：">
                            <el-input v-model="alarmData.alarmAddr" maxlength="60" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理时间：">
                            <el-input value="2023-05-02 18:45:32" maxlength="60" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="处理描述：">
                            <el-input type="textarea" value="重新连接后恢复正常" style="width:810px" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="现场图片：">
                            <img src="../../../../../assets/wx.png" alt="" style="width: 300px;height:200px">
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog title='审核信息' :data="alarmData" class="map_dialog" width="1000px" :modal="false"
            :close-on-click-modal="false" :visible.sync="showCheckDialog">
            <el-form :data="alarmData" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="审核人：">
                            <el-input value="Admin" maxlength="60" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核时间：">
                            <el-input value="2023-05-02 18:47:32" maxlength="60" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="审核意见：">
                            <el-input type="textarea" value="已审核" style="width:810px" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showGDDialog: false,
            showCheckDialog: false,
            alarmData: '',
            id: '',
            alarmFlowData: [],
            alarmFlow: [
                [
                    {
                        State: '已申报',
                        Name: 'Admin',
                        Time: '2023-05-01 17:45:32',
                        Note: ''
                    },
                    {
                        State: '已派工',
                        Name: 'Admin',
                        Time: '2023-05-01 17:45:32',
                        Note: ''
                    }, {
                        State: '已签收',
                        Name: '张伟',
                        Time: '2023-05-02 18:41:32',
                        Note: ''
                    }, {
                        State: '已签收',
                        Name: '巩凡',
                        Time: '2023-05-02 18:41:32',
                        Note: ''
                    }, {
                        State: '已维修',
                        Name: '张伟',
                        Time: '2023-05-02 18:45:32',
                        Note: ''
                    }, {
                        State: '已维修',
                        Name: '巩凡',
                        Time: '2023-05-02 18:46:32',
                        Note: ''
                    }, {
                        State: '已审核',
                        Name: 'Admin',
                        Time: '2023-05-02 18:47:32',
                        Note: ''
                    }, {
                        State: '已完成',
                        Name: 'Admin',
                        Time: '2023-05-02 18:47:33',
                        Note: ''
                    }],

                [
                    {
                        State: '已申报',
                        Name: 'Admin',
                        Time: '2023-05-01 17:45:32',
                        Note: ''
                    },
                    {
                        State: '已派工',
                        Name: 'Admin',
                        Time: '2023-05-01 17:45:32',
                        Note: ''
                    }, {
                        State: '已签收',
                        Name: '张三',
                        Time: '2023-05-02 18:41:32',
                        Note: ''
                    }, {
                        State: '已签收',
                        Name: '李四',
                        Time: '2023-05-02 18:41:32',
                        Note: ''
                    }, {
                        State: '未维修',
                        Name: '',
                        Time: '',
                        Note: ''
                    }, {
                        State: '未审核',
                        Name: '',
                        Time: '',
                        Note: ''
                    }, {
                        State: '未完成',
                        Name: '',
                        Time: '',
                        Note: ''
                    }]

            ]
        }
    },
    created() {
        this.getParams()
        this.alarmFlowData = this.alarmFlow[0]
        if (this.id == 1) {
            this.alarmFlowData = this.alarmFlow[1]
        }
    },
    mounted() {

    },
    methods: {
        getParams() {
            this.id = this.$route.query.id
            this.alarmData = JSON.parse(localStorage.getItem("alarm_" + this.id))
        },
        editAlarm() {
            this.showGDDialog = true
        },
        checkAlarm() {
            this.showCheckDialog = true
        },
        save() {
            // console.log(localStorage.alarm_ + this.id);
            // let alarmName = document.getElementById("alarmName").value
            // let alarmLevel = document.getElementById("alarmLevel").value
            // let alarmContent = document.getElementById("alarmContent").value
            // let roadName = document.getElementById("roadName").value
            // let pileNum = document.getElementById("pileNum").value
            // let company = document.getElementById("company").value
            // let deviceType = document.getElementById("deviceType").value
            // let alarmDate = document.getElementById("alarmDate").value
            // let alarmStatusContent = '已签收'
            // let alarmStatus = 2
            // let masterMaintenance = document.getElementById("masterMaintenance").value
            // let slaveMaintenance = document.getElementById("slaveMaintenance").value
            // let car = document.getElementById("car").value
            // let maintenanceMoney = document.getElementById("maintenanceMoney").value
            // let inventoryList = document.getElementById("inventoryList").value

            // console.log(alarmName);
            // localStorage.setItem("alarmStatusContent", JSON.stringify(alarmStatusContent))
            // localStorage.setItem("alarmStatus", JSON.stringify(alarmStatus))
            // console.log(localStorage.getItem("alarm_" + this.id));
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    min-height: calc(180vh - 80px);

    .departmentCard {
        width: 80%;
        margin: 0 auto;

        .back {
            font-size: 14px;
            color: #28356c;
            background: #E5EAFF;
            width: 120px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            // margin-bottom: 10px;
            cursor: pointer;
            margin-right: 10px;
            float: left;
        }

        .filter-container {}

        .add {
            // float: right;
            display: flex;
            justify-content: space-between;
        }
    }
}

.handle {
    display: flex;
    justify-content: flex-end;
}
</style>
<style lang="scss">
.map_dialog {
    .el-dialog {
        // background: rgba(0, 0, 0, 0.8);
        overflow: hidden;
        // border: 2px solid;
        border-radius: 5px;
        height: 550px;

        // box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
        .el-dialog__title {
            color: #666;

            .el-dialog__close {
                color: #666;
            }
        }

        .el-dialog__body {
            padding: 0px 20px 20px;
        }
    }

    .dialog_bottom {
        font-size: 16px;
        line-height: 25px;
        display: flex;
        justify-content: space-between;

        .base_data,
        .pipe_data {
            width: 49%;

            p {
                color: #666;
                // background: rgba(255, 255, 255, 0.2);
                margin: 10px 0;
                width: 99%;
            }

            span {
                color: #666;
            }
        }
    }

    .base_data_bottom {
        width: 90;
        font-size: 16px;
        line-height: 25px;

        p {
            color: #666;
            // background: rgba(255, 255, 255, 0.2);
            margin: 10px 0;
            // width: 99%;
        }

        span {
            color: #666;
        }
    }
}

.has-gutter tr th {
    background: #e1e6f1 !important;
    color: #767fa2;
}

.el-table {
    color: #28356c;
    /* height: 200px!important; */
}

.steps {
    float: left;
    width: 100%;
    color: #666;
    font-size: 15px;
    margin-left: 70px;

    .step {
        display: flex;
        justify-content: start;

        .icon {
            position: relative;
            width: 30px;
            height: 40px;

            .point {
                position: absolute;
                top: 11px;
                left: 1px;
                z-index: 99;
                width: 17px;
                height: 17px;
                background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
                border-radius: 17px;
            }

            .lease {
                background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            }

            .space {
                background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            }

            .line {
                position: absolute;
                left: 10px;
                top: 0;
                width: 1px;
                height: 40px;
                background: red;
            }
        }

        .detail {

            // border: 1px solid pink;
            span {
                line-height: 40px;
                display: block;
                float: left;
            }

            .operTime {
                width: 200px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .state {
                width: 80px;
            }

            .user {
                width: 80px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .notes {
                width: 100px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

        }
    }
}
</style>
  
  